<template>

  <!-- 教师信息 -->
   <v-card class="my-5">
      <v-card-title>教师信息</v-card-title>
      <v-card-text>
        姓名：{{stores.courseTeacher?.name}}<br>
      </v-card-text>
   </v-card>
  <!-- 简介 -->
  <v-card class="my-5">
    <v-card-title>课程简介</v-card-title>
    <v-card-text>{{ stores.courseIntroduction?.content }}</v-card-text>
  </v-card>
   <!-- 大纲 -->
  <v-card class="my-5">
    <v-card-title>课程大纲</v-card-title>
    <v-card-text >
    </v-card-text>
    <v-car-action class="d-flex flex-column justify-space-evenly pb-10">

      <v-card v-if="isTeacher" class="d-flex flex-column" variant="text">
        <v-file-input  label="上传课程大纲" accept=".pdf" />
        <v-btn @click="modify"> <v-icon>mdi-file-edit</v-icon>上传并修改 </v-btn>
      </v-card>

      <v-card class="d-flex justify-space-evenly" variant="text">
        <v-btn @click="preSyllabus=true">查看
          <v-dialog :model-value="preSyllabus" fullscreen>
            <v-card>
              <v-card-title class="bg-primary">课程大纲</v-card-title>
              <v-card-text class="my-0 py-0 px-0">
                <embed :src="url" type="application/pdf" class = "fill-height" width="100%">
              </v-card-text>
              <v-card-actions class="d-flex bg-primary">
                <v-btn @click="preSyllabus=false">返回</v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </v-btn>
        <v-btn @click="downloadSyllabus">下载</v-btn>
      </v-card>

    </v-car-action>

  </v-card>
  <!-- 教学日历 -->
  <v-card class="my-5">
    <v-card-title>教学日历</v-card-title>
    <v-card-text>
    </v-card-text>
  </v-card>



  <overlayTip ref="overlayTipInstance" />
</template>

<script setup lang="ts">


import { computed, onBeforeMount, useTemplateRef, watch } from 'vue';
import {useCourseStore}  from '@/stores/course/course';
import overlayTip from '@/components/common/overlayTip.vue';
import { ref } from 'vue';
import { useTokenStore } from '@/stores/token';
import { Role } from '@/services/users/types';
import { API } from '@/services';
const stores = useCourseStore();
const token = useTokenStore();

const isTeacher = computed(() => {
  return token.getRole() === Role.Teacher;
})

onBeforeMount(() => {
  stores.dispatchGetCourseTeacher(props.id);
  stores.dispatchGetCourseIntroduction(props.id);
  stores.dispatchGetSyllabus(props.id);
})
const url = computed(() => {
  if (stores.courseSyllabus === undefined) {
    return '';
  }
  return URL.createObjectURL(stores.courseSyllabus!.date)
})
const props = defineProps({
  id: {
    type: Number,
    required: true
  }
})

watch(() => props.id, (newID) => {
  if (newID === undefined) {
    return;
  } else if (newID === props.id) {
    return;
  }
  stores.dispatchGetCourseTeacher(props.id);
  stores.dispatchGetCourseIntroduction(props.id);
  stores.dispatchGetSyllabus(props.id);
})

const overlayTipInstance = useTemplateRef('overlayTipInstance');

// 下载大纲
function downloadFile(data:Blob, fileName:string) {
  const url = URL.createObjectURL(data);
  const a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  a.click();
  URL.revokeObjectURL(url);
}

const preSyllabus = ref(false);
async function downloadSyllabus() {
  await stores.dispatchGetSyllabus(props.id);
  if (stores.courseSyllabus !== undefined) {
    downloadFile(stores.courseSyllabus.date, '课程大纲.pdf');
  } else {
    overlayTipInstance.value!.error('课程大纲不存在, 请联系老师', 3000);
  }
}

const file = ref<File>();

function modify(){
  if(file.value === undefined){
    overlayTipInstance.value!.error('请选择文件', 3000);
    return;
  }
  API.courses.modifySyllabus(
    props.id,token.token.id,file.value
  ).then(() => {
    overlayTipInstance.value!.info('上传成功', 3000);
  }).catch(() => {
    overlayTipInstance.value!.error('上传失败', 3000);
  })
}
</script>
